forcegraph.js ➔ ... ➔ moveTo - Code Metrics - Inspection of "[TASK] improve forcegraph" - ffrgb/meshviewer - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Pull Request — develop (#124)

unknown

created 2017-05-06 08:23 UTC

forcegraph.js ➔ ... ➔ moveTo B

↳ Parent: Project

Complexity

Conditions	2
Paths	2

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes	2
Bugs	0	Features	1

Metric	Value
cc	2
c	2
b	0
f	1
nc	2
dl	0
loc	30
rs	8.8571
nop	3

1 Function

Rating	Name	Duplication	Size	Complexity
A	forcegraph.js ➔ ... ➔ d3Timer.timer	0	12	2

define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'd3-timer', 'd3-ease', 'd3-interpolate', 'utils/math', 'forcegraph/draw'],
  function (d3Selection, d3Force, d3Zoom, d3Drag, d3Timer, d3Ease, d3Interpolate, math, draw) {
    'use strict';

    return function (config, linkScale, sidebar, router) {
      var self = this;
      var el;
      var canvas;
      var ctx;
      var force;
      var forceLink;
      var animate = false;

      var transform = d3Zoom.zoomIdentity;
      var intNodes = [];
      var dictNodes = {};
      var intLinks = [];

      var NODE_RADIUS_DRAG = 10;
      var NODE_RADIUS_SELECT = 15;
      var LINK_RADIUS_SELECT = 12;
      var ZOOM_ANIMATE_DURATION = 500;

      var ZOOM_MIN = 1 / 8;
      var ZOOM_MAX = 3;

      var FORCE_ALPHA = 0.3;


      draw.setTransform(transform);

      function sleep(time) {
        return new Promise(function (resolve) {
          setTimeout(resolve, time);
        });
      }

      function resizeCanvas() {
        canvas.width = el.offsetWidth;
        canvas.height = el.offsetHeight;
        draw.setMaxArea(canvas.width, canvas.height);
      }

      function moveTo(x, y, k) {
        var end = {k: k};
        end.x = (canvas.width + sidebar()) / 2 - x * k;
        end.y = canvas.height / 2 - y * k;

        if (!animate) {
          transform.x = end.x;
          transform.y = end.y;
          transform.k = end.k;
          redraw();
        } else {
          var start = { x: transform.x, y: transform.y, k: transform.k };

          var interpolate = d3Interpolate.interpolateObject(start, end);

          var ease = d3Ease.easeQuadInOut;
          var timer = d3Timer.timer(function (t) {
            if (t >= ZOOM_ANIMATE_DURATION) {
              timer.stop();
              return;
            }

            var v = interpolate(ease(t / ZOOM_ANIMATE_DURATION));
            transform.x = v.x;
            transform.y = v.y;
            transform.k = v.k;
            window.requestAnimationFrame(redraw);
          });
        }
      }

      function onClick() {
        if (d3Selection.event.defaultPrevented) {
          return;
        }

        var e = transform.invert([d3Selection.event.clientX, d3Selection.event.clientY]);
        var n = force.find(e[0], e[1], NODE_RADIUS_SELECT);

        if (n !== undefined) {
          router.fullUrl({ node: n.o.node.nodeinfo.node_id });
          return;
        }

        e = { x: e[0], y: e[1] };

        var closedLink;
        var radius = LINK_RADIUS_SELECT;
        intLinks
          .forEach(function (d) {
            var distance = math.distanceLink(e, d.source, d.target);
            if (distance < radius) {
              closedLink = d;
              radius = distance;
            }
          });

        if (closedLink !== undefined) {
          router.fullUrl({ link: closedLink.o.id });
        }
      }

      function redraw() {
        ctx.save();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.translate(transform.x, transform.y);
        ctx.scale(transform.k, transform.k);

        intLinks.forEach(draw.drawLink);
        intNodes.forEach(draw.drawNode);

        ctx.restore();
      }

      el = document.createElement('div');
      el.classList.add('graph');

      forceLink = d3Force.forceLink()
        .distance(function (d) {
          if (d.o.vpn) {
            return 0;
          }
          return 75;
        })
        .strength(function (d) {
          if (d.o.vpn) {
            return 0.02;
          }
          return Math.max(0.5, 1 / d.o.tq);
        });

      var zoom = d3Zoom.zoom()
        .scaleExtent([ZOOM_MIN, ZOOM_MAX])
        .on('zoom', function () {
          transform = d3Selection.event.transform;
          draw.setTransform(transform);
          redraw();
        });

      force = d3Force.forceSimulation()
        .force('link', forceLink)
        .force('charge', d3Force.forceManyBody())
        .force('x', d3Force.forceX().strength(0.02))
        .force('y', d3Force.forceY().strength(0.02))
        .force('collide', d3Force.forceCollide())
        .on('tick', redraw)
        .alphaDecay(0.01)
        .velocityDecay(0.1);

      var drag = d3Drag.drag()
        .subject(function () {
          var e = transform.invert([d3Selection.event.x, d3Selection.event.y]);
          var n = force.find(e[0], e[1], NODE_RADIUS_DRAG);

          if (n !== undefined) {
            n.x = d3Selection.event.x;
            n.y = d3Selection.event.y;
            return n;
          }
          return undefined;
        })
        .on('start', function () {
          if (!d3Selection.event.active) {
            force.alphaTarget(FORCE_ALPHA).restart();
          }
          d3Selection.event.subject.fx = transform.invertX(d3Selection.event.subject.x);
          d3Selection.event.subject.fy = transform.invertY(d3Selection.event.subject.y);
        })
        .on('drag', function () {
          d3Selection.event.subject.fx = transform.invertX(d3Selection.event.x);
          d3Selection.event.subject.fy = transform.invertY(d3Selection.event.y);
        })
        .on('end', function () {
          if (!d3Selection.event.active) {
            force.alphaTarget(0);
          }
          d3Selection.event.subject.fx = null;
          d3Selection.event.subject.fy = null;
        });

      canvas = d3Selection.select(el)
        .append('canvas')
        .on('click', onClick)
        .call(drag)
        .call(zoom)
        .node();

      ctx = canvas.getContext('2d');
      draw.setCTX(ctx);

      window.addEventListener('resize', function () {
        resizeCanvas();
        redraw();
      });

      self.setData = function setData(data) {
        intNodes = data.graph.nodes.map(function (d) {
          var e;
          if (d.id in dictNodes) {
            e = dictNodes[d.id];
          } else {
            e = {};
            dictNodes[d.id] = e;
          }

          e.o = d;

          return e;
        });

        intLinks = data.graph.links.map(function (d) {
          var e = {};
          e.o = d;
          e.source = dictNodes[d.source.id];
          e.target = dictNodes[d.target.id];
          e.color = linkScale(1 / d.tq);

          return e;
        });

        force.nodes(intNodes);
        forceLink.links(intLinks);

        force.alpha(1).restart();
        force.alphaTarget(1);
        resizeCanvas();
        sleep(1000).then(function () {
          force.alphaTarget(0);
          animate = true;
        });
      };

      self.resetView = function resetView() {
        draw.setHighlight(null);
        moveTo(0, 0, (ZOOM_MIN + 1) / 2);
      };

      self.gotoNode = function gotoNode(d) {
        function getNode() {
          for (var i = 0; i < intNodes.length; i++) {
            var n = intNodes[i];
            if (n.o.node.nodeinfo.node_id !== d.nodeinfo.node_id) {
              continue;
            }
            draw.setHighlight({ type: 'node', o: n.o.node });
            moveTo(n.x, n.y, (ZOOM_MAX + 1) / 2);
            break;
          }
        }
        if (!animate) {
          sleep(1500).then(getNode);
        } else {
          getNode();
        }
      };

      self.gotoLink = function gotoLink(d) {
        function getLink() {
          draw.setHighlight({ type: 'link', o: d });
          for (var i = 0; i < intLinks.length; i++) {
            var l = intLinks[i];
            if (l.o !== d) {
              continue;
            }
            moveTo((l.source.x + l.target.x) / 2, (l.source.y + l.target.y) / 2, transform.k);
            break;
          }
        }
        if (!animate) {
          sleep(1500).then(getLink);
        } else {
          getLink();
        }
      };


      self.gotoLocation = function gotoLocation() {
        // ignore
      };

      self.destroy = function destroy() {
        force.stop();
        canvas.remove();
        force = null;

        if (el.parentNode) {
          el.parentNode.removeChild(el);
        }
      };

      self.render = function render(d) {
        d.appendChild(el);
        resizeCanvas();
      };

      return self;
    };
  });


1			define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'd3-timer', 'd3-ease', 'd3-interpolate', 'utils/math', 'forcegraph/draw'],
2			function (d3Selection, d3Force, d3Zoom, d3Drag, d3Timer, d3Ease, d3Interpolate, math, draw) {
3			'use strict';
4
5			return function (config, linkScale, sidebar, router) {
6			var self = this;
7			var el;
8			var canvas;
9			var ctx;
10			var force;
11			var forceLink;
12			var animate = false;
13
14			var transform = d3Zoom.zoomIdentity;
15			var intNodes = [];
16			var dictNodes = {};
17			var intLinks = [];
18
19			var NODE_RADIUS_DRAG = 10;
20			var NODE_RADIUS_SELECT = 15;
21			var LINK_RADIUS_SELECT = 12;
22			var ZOOM_ANIMATE_DURATION = 500;
23
24			var ZOOM_MIN = 1 / 8;
25			var ZOOM_MAX = 3;
26
27			var FORCE_ALPHA = 0.3;
28
29
30			draw.setTransform(transform);
31
32			function sleep(time) {
33			return new Promise(function (resolve) {
34			setTimeout(resolve, time);
35			});
36			}
37
38			function resizeCanvas() {
39			canvas.width = el.offsetWidth;
40			canvas.height = el.offsetHeight;
41			draw.setMaxArea(canvas.width, canvas.height);
42			}
43
44			function moveTo(x, y, k) {
45			var end = {k: k};
46			end.x = (canvas.width + sidebar()) / 2 - x * k;
47			end.y = canvas.height / 2 - y * k;
48
49			if (!animate) {
50			transform.x = end.x;
51			transform.y = end.y;
52			transform.k = end.k;
53			redraw();
54			} else {
55			var start = { x: transform.x, y: transform.y, k: transform.k };
56
57			var interpolate = d3Interpolate.interpolateObject(start, end);
58
59			var ease = d3Ease.easeQuadInOut;
60			var timer = d3Timer.timer(function (t) {
61			if (t >= ZOOM_ANIMATE_DURATION) {
62			timer.stop();
63			return;
64			}
65
66			var v = interpolate(ease(t / ZOOM_ANIMATE_DURATION));
67			transform.x = v.x;
68			transform.y = v.y;
69			transform.k = v.k;
70			window.requestAnimationFrame(redraw);
71			});
72			}
73			}
74
75			function onClick() {
76			if (d3Selection.event.defaultPrevented) {
77			return;
78			}
79
80			var e = transform.invert([d3Selection.event.clientX, d3Selection.event.clientY]);
81			var n = force.find(e[0], e[1], NODE_RADIUS_SELECT);
82
83			if (n !== undefined) {
84			router.fullUrl({ node: n.o.node.nodeinfo.node_id });
85			return;
86			}
87
88			e = { x: e[0], y: e[1] };
89
90			var closedLink;
91			var radius = LINK_RADIUS_SELECT;
92			intLinks
93			.forEach(function (d) {
94			var distance = math.distanceLink(e, d.source, d.target);
95			if (distance < radius) {
96			closedLink = d;
97			radius = distance;
98			}
99			});
100
101			if (closedLink !== undefined) {
102			router.fullUrl({ link: closedLink.o.id });
103			}
104			}
105
106			function redraw() {
107			ctx.save();
108			ctx.clearRect(0, 0, canvas.width, canvas.height);
109			ctx.translate(transform.x, transform.y);
110			ctx.scale(transform.k, transform.k);
111
112			intLinks.forEach(draw.drawLink);
113			intNodes.forEach(draw.drawNode);
114
115			ctx.restore();
116			}
117
118			el = document.createElement('div');
119			el.classList.add('graph');
120
121			forceLink = d3Force.forceLink()
122			.distance(function (d) {
123			if (d.o.vpn) {
124			return 0;
125			}
126			return 75;
127			})
128			.strength(function (d) {
129			if (d.o.vpn) {
130			return 0.02;
131			}
132			return Math.max(0.5, 1 / d.o.tq);
133			});
134
135			var zoom = d3Zoom.zoom()
136			.scaleExtent([ZOOM_MIN, ZOOM_MAX])
137			.on('zoom', function () {
138			transform = d3Selection.event.transform;
139			draw.setTransform(transform);
140			redraw();
141			});
142
143			force = d3Force.forceSimulation()
144			.force('link', forceLink)
145			.force('charge', d3Force.forceManyBody())
146			.force('x', d3Force.forceX().strength(0.02))
147			.force('y', d3Force.forceY().strength(0.02))
148			.force('collide', d3Force.forceCollide())
149			.on('tick', redraw)
150			.alphaDecay(0.01)
151			.velocityDecay(0.1);
152
153			var drag = d3Drag.drag()
154			.subject(function () {
155			var e = transform.invert([d3Selection.event.x, d3Selection.event.y]);
156			var n = force.find(e[0], e[1], NODE_RADIUS_DRAG);
157
158			if (n !== undefined) {
159			n.x = d3Selection.event.x;
160			n.y = d3Selection.event.y;
161			return n;
162			}
163			return undefined;
164			})
165			.on('start', function () {
166			if (!d3Selection.event.active) {
167			force.alphaTarget(FORCE_ALPHA).restart();
168			}
169			d3Selection.event.subject.fx = transform.invertX(d3Selection.event.subject.x);
170			d3Selection.event.subject.fy = transform.invertY(d3Selection.event.subject.y);
171			})
172			.on('drag', function () {
173			d3Selection.event.subject.fx = transform.invertX(d3Selection.event.x);
174			d3Selection.event.subject.fy = transform.invertY(d3Selection.event.y);
175			})
176			.on('end', function () {
177			if (!d3Selection.event.active) {
178			force.alphaTarget(0);
179			}
180			d3Selection.event.subject.fx = null;
181			d3Selection.event.subject.fy = null;
182			});
183
184			canvas = d3Selection.select(el)
185			.append('canvas')
186			.on('click', onClick)
187			.call(drag)
188			.call(zoom)
189			.node();
190
191			ctx = canvas.getContext('2d');
192			draw.setCTX(ctx);
193
194			window.addEventListener('resize', function () {
195			resizeCanvas();
196			redraw();
197			});
198
199			self.setData = function setData(data) {
200			intNodes = data.graph.nodes.map(function (d) {
201			var e;
202			if (d.id in dictNodes) {
203			e = dictNodes[d.id];
204			} else {
205			e = {};
206			dictNodes[d.id] = e;
207			}
208
209			e.o = d;
210
211			return e;
212			});
213
214			intLinks = data.graph.links.map(function (d) {
215			var e = {};
216			e.o = d;
217			e.source = dictNodes[d.source.id];
218			e.target = dictNodes[d.target.id];
219			e.color = linkScale(1 / d.tq);
220
221			return e;
222			});
223
224			force.nodes(intNodes);
225			forceLink.links(intLinks);
226
227			force.alpha(1).restart();
228			force.alphaTarget(1);
229			resizeCanvas();
230			sleep(1000).then(function () {
231			force.alphaTarget(0);
232			animate = true;
233			});
234			};
235
236			self.resetView = function resetView() {
237			draw.setHighlight(null);
238			moveTo(0, 0, (ZOOM_MIN + 1) / 2);
239			};
240
241			self.gotoNode = function gotoNode(d) {
242			function getNode() {
243			for (var i = 0; i < intNodes.length; i++) {
244			var n = intNodes[i];
245			if (n.o.node.nodeinfo.node_id !== d.nodeinfo.node_id) {
246			continue;
247			}
248			draw.setHighlight({ type: 'node', o: n.o.node });
249			moveTo(n.x, n.y, (ZOOM_MAX + 1) / 2);
250			break;
251			}
252			}
253			if (!animate) {
254			sleep(1500).then(getNode);
255			} else {
256			getNode();
257			}
258			};
259
260			self.gotoLink = function gotoLink(d) {
261			function getLink() {
262			draw.setHighlight({ type: 'link', o: d });
263			for (var i = 0; i < intLinks.length; i++) {
264			var l = intLinks[i];
265			if (l.o !== d) {
266			continue;
267			}
268			moveTo((l.source.x + l.target.x) / 2, (l.source.y + l.target.y) / 2, transform.k);
269			break;
270			}
271			}
272			if (!animate) {
273			sleep(1500).then(getLink);
274			} else {
275			getLink();
276			}
277			};
278
279
280			self.gotoLocation = function gotoLocation() {
281			// ignore
282			};
283
284			self.destroy = function destroy() {
285			force.stop();
286			canvas.remove();
287			force = null;
288
289			if (el.parentNode) {
290			el.parentNode.removeChild(el);
291			}
292			};
293
294			self.render = function render(d) {
295			d.appendChild(el);
296			resizeCanvas();
297			};
298
299			return self;
300			};
301			});
302

ffrgb / meshviewer

Pull Request — develop (#124)

forcegraph.js ➔ ... ➔ moveTo B

Complexity

Size

Duplication

Importance

1 Function

Duplication Side-by-Side

Filter issues like